<div class="content">
    <div id="example_title">
        <h1>Remote Source</h1>
        This example demonstrates how to pull remote data into list and enum fields. Please note, that compare function was added since 1.5, but in previous versions it is ignored. It will still work, but a bit different.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="height: 20px"></div>
<div class="w2ui-field">
    <label>List:</label>
    <div> <input id="list"> </div>
</div>
<br>
<div class="w2ui-field">
    <label>Multi:</label>
    <div> <input id="enum"> </div>
</div>
<div style="height: 20px"></div>

<style>
.w2ui-field input {
    width: 400px;
}
.w2ui-field > div > span {
    margin-left: 20px;
}
</style>

<!--CODE-->
<script type="module">
import { w2field, query } from '__W2UI_PATH__'

new w2field('list', {
    el: query('#list')[0],
    url: 'data/enum.json',
    onRequest(event) {
        console.log(`Request: ${event.detail.url} Search: ${event.detail.search}`)
    },
    onLoad(event) {
        console.log('Response:', event.detail.data)
    }
})

new w2field('enum', {
    el: query('#enum')[0],
    url: 'data/enum.json',
    onRequest(event) {
        console.log(`Request: ${event.detail.url} Search: ${event.detail.search}`)
    },
    onLoad(event) {
        console.log('Response:', event.detail.data)
    }
})
</script>